<template>
    <div>
    <list title="商品详情"/>
    <div class="xiang">
       <!-- 轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item
            v-for="i in pics"
            :key="i.id"
            >
                <img :src="i.pic" alt="">
            </van-swipe-item>
        </van-swipe>
       <!-- /轮播 -->
       <!-- 商品名称 -->
        <h2 > {{ basicInfo.name }} </h2>
       <!-- /商品名称 -->
       <!-- 商品价格 -->
        <h3>${{ basicInfo.minPrice }}</h3>
       <!-- 。商品价格 -->
       <!-- 商品详情 -->
       <div v-html="content" class="wyp"></div>
       <!-- /商品详情 -->
       <!-- 商品弹出层 -->
        <van-popup
        v-model="show"
        position='bottom'
        :style="{ height: '40%' }"
        round
        closeable
        >
        <div class="popups">
            <van-card
                :num="sku.num"
                :price="basicInfo.minPrice"
                :title="basicInfo.name"
                thumb=""
                >
                <template #tags>
                    <van-tag plain type="danger">{{ basicInfo.statusStr }}</van-tag>
                    <van-button icon="plus" type="primary"
                    @click="action"
                    >{{ mc }}</van-button>
                </template>
                <template #footer>
                    <van-stepper v-model="sku.num"/>
            </template>
            </van-card>
        </div>
        </van-popup>
       <!-- /商品弹出层 -->
    </div>
    <van-goods-action>
        <van-goods-action-icon icon="chat-o" @click="kf" text="客服" dot />
        <van-goods-action-icon @click="$router.push('/cart')"  text="购物车" :badge="$store.state.cart.items.length||''" icon="cart-o" />
        <van-goods-action-button
        @click="reveal(1)"
         type="warning" text="加入购物车" />
        <van-goods-action-button
        @click="reveal(2)"
         type="danger" text="立即购买" />
    </van-goods-action>
    </div>
</template>

<script>
import list from '@views/Home/component/ItemListHead'
import { fetchXQ } from '@api'
import { Notify } from 'vant'
export default {
  data () {
    return {
      basicInfo: {},
      pics: [],
      content: '',
      show: false,
      mc: '',
      sku: {
        // 商品信息 用于提交购物车或订单页

      }
    }
  },
  methods: {
    kf () {
      Notify({ type: 'primary', message: '客服放年假中，暂无客服' })
    },
    action () {
      if (this.mc === '加入购物车') {
        this.$store.commit('cart/add_cart', this.sku)
        this.show = false
      } else {
        alert('加入购物车操作')
      }
    },
    reveal (r) {
      // 点击弹出
      if (r === 1) {
        this.mc = '加入购物车'
      } else {
        this.mc = '立即购买'
      }
      this.show = true
    },
    fetchDetail () {
      fetchXQ(this.$route.query.id).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.pics = res.data.data.pics
          this.content = res.data.data.content
          this.sku = {
            ...res.data.data.basicInfo,
            // 购买数量
            num: 1,
            checked: true
          }
        }
      })
    }

  },
  components: {
    list
  },
  created () {
    this.fetchDetail()
  }
}
</script>

<style lang="scss" >
.xiang{
    margin-top: 46px;
    .my-swipe{
        img{
            width: 100%;
            height: 340px;
        }
    }
    .wyp{
      img{
               width:100%;
           }
    }
    h3{
        color: red;
        font-weight: 7;
        font-size: 22px;
        margin-left: 5px;
    }
    .popups{
        height: 100%;
        padding-top: 35px;
        background-color: #fafafa;
        position: relative;
        .van-button{
                position: absolute;
                bottom: -118px;
                left: -17px;
                width: 109%;
        }
    }
}
</style>
